<template>
  <div>
    <div class="search">
      <search></search>
    </div>
    <div class="banner">
      <swiper></swiper>
    </div>
    <div class="grid">
      <grid col="4" rowGap="20px">
        <grid-item v-for="(item,index) in cates">
          <img :src="item.image_src"width="50px"/>
          <p>{{item.title}}</p>
        </grid-item>
      </grid>
    </div>
    <list></list>
  </div>
</template>

<script>
    import swiper from '@/components/swiper/swiper';
    import grid from '@/components/layout/grid';
    import gridItem from '@/components/layout/gridItem';
    import search from '@/components/search/search';
    import cate from '@/components/cate/cate';
    import list from '@/components/list/list';
    export default {
        name: "home",
        data(){
          return {
            cates:[
              {
                title:'火锅',
                image_src:'/static/cates/dish.png'
              },
              {
                title:'甜点饮品',
                image_src:'/static/cates/drink.png'
              },
              {
                title:'自助餐',
                image_src:'/static/cates/buffet.png'
              },
              {
                title:'小吃快餐',
                image_src:'/static/cates/snack.png'
              },
              {
                title:'西餐',
                image_src:'/static/cates/western.png'
              },
              {
                title:'烧烤烤肉',
                image_src:'/static/cates/barbecue.png'
              },
              {
                title:'香锅烤鱼',
                image_src:'/static/cates/grill.png'
              },
              {
                title:'海鲜',
                image_src:'/static/cates/seafood.png'
              }
            ]
          }
        },
        components:{
          swiper,
          grid,
          gridItem,
          search,
          cate,
          list
        },
      methods:{
          btnClick:function (e) {
            console.log(e);
          }
      }
    }
</script>

<style scoped>
  .search,.banner,.grid{
    margin-bottom: 10px;
  }
  .banner{
    width: 100%;
    height: 30%;
  }

</style>
